<%@ page language="java" pageEncoding="UTF-8" %>
	<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		<!DOCTYPE html>
		<html>

		<head>
			<title>后台管理</title>
			<meta charset="utf-8" />
			<base href="${pageContext.request.contextPath}/">
			<link rel="stylesheet" href="css/admin.css" />
			<script src="../js/jquery-3.6.0.js"></script>
			<script src="../js/jquery-form.js" type="text/javascript"></script>
			<script src="../js/template.js"></script>
			<script src="/layer/layer.js"></script>
		</head>

		<body>
			<div class="container">
				<div id="header">
					<jsp:include page="header.jsp"></jsp:include>
				</div>
				<div id="admin_left">
					<ul class="submenu">
						<jsp:include page="left.jsp"></jsp:include>
					</ul>
					<div id="copyright"></div>
				</div>

				<div id="admin_right">
					<div class="content_box" style="border:non;height: 640px;">
						<div class="searchbar">
							<form action="admin/order" method="get" id="searchFrom">
								<input type="hidden" name="opr" value="all" />
								<input type="hidden" name="p" id="p" value="1" />
								<input type="hidden" name="pSize" id="pSize" value="5" />
								<select class="auto" name="state" id="state">
									<option value="0">支付状态</option>

									<option value="1">待付款</option>
									<option value="2">已付款</option>
									<option value="3">已发货</option>
									<option value="4">已收货</option>
									<option value="5">退货中</option>
									<option value="6">同意退货</option>
									<option value="7">不同意退货</option>
									<option value="8">退货成功</option>

								</select>
								收货人： <input class="small" name="name" id="name" type="text" value="${order.conSingnee}">
								下单时间：<input class="small" name="sTime" id="name" type="date" value="${order.sTime}">
								至：<input class="small" name="eTime" id="name" type="date" value="${order.eTime}">
								<button class="btn" type="submit">
									<span class="sel">筛 选</span>
								</button>
							</form>
						</div>
						<div class="content">
							<table width="98%" cellspacing="0" cellpadding="0" class="border_table_org"
								style="float:left">
								<thead>
									<tr>
										<th>所有订单</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td style="padding:5px 0">
											<table class="list_table3" width="100%">
												<thead>
													<th>订单号</th>
													<th>收货人</th>
													<th>支付状态</th>
													<th>金额</th>
													<th>下单时间</th>
													<th>操作</th>
												</thead>
												<tbody>
													<c:forEach items="${pageBean.data}" var="order">
														<tr>
															<td>${order.ordersId}</td>
															<td><b>${order.conSingnee}</b></td>
															<td>
																<c:if test="${order.state==1}"><b class="red3">待付款</b>
																</c:if>
																<c:if test="${order.state==2}">已付款</c:if>
																<c:if test="${order.state==3}">已发货</c:if>
																<c:if test="${order.state==4}">已收货</c:if>
																<c:if test="${order.state==5}">退货中</c:if>
																<c:if test="${order.state==6}">同意退货</c:if>
																<c:if test="${order.state==7}">不同意退货</c:if>
																<c:if test="${order.state==8}">退货成功</c:if>
															</td>
															<td><b class="red3">${order.totalMoney}</b></td>
															<td>${order.times}</td>
															<td><a href="javascript:void(0)"
																	onclick="select(${order.id})"><img class="operator"
																		src="images/admin/icon_check.gif"
																		title="查看" /></a> <a href="javascript:void(0)"
																	id="ide" onclick="ide(${order.id})"><img
																		class="operator"
																		src="images/admin/icon_edit.gif"
																		title="编辑" /></a> <a href="javascript:void(0)"
																	onclick="del(${order.id})"><img class="operator"
																		src="images/admin/icon_del.gif"
																		title="删除" /></a></td>
														</tr>
													</c:forEach>
												</tbody>
											</table>
										</td>
									</tr>
								</tbody>
							</table>
						</div>

						<form>
							<select class="auto" name="pageSize" id="categorys"
								style="float: right;margin-right: 50px; margin-top: 10px"
								onchange="goPageSize(this.value)">
								<c:forEach begin="5" end="30" var="pSize" step="5">
									<option value="${pSize}">${pSize}</option>
								</c:forEach>

							</select>
							<span
								style="float: right;margin-right: 10px;padding-top: 5px;margin-top: 10px;color: rgb(148, 152, 152);">
								页面数据:${pageBean.currPageSize} 条</span>
						</form>

						<div class='pages_bar'>
							<a href='javascript:goPage(1)' id="first">首页</a>
							<a href="javascript:if(${pageBean.currPage==1}){goPage(1)}else{goPage(${pageBean.currPage-1})}"
								id="prev">上一页</a>
							<c:forEach begin="1" end="${pageBean.totalPages}" var="p">
								<a href="javascript:goPage(${p})">${p}</a>
							</c:forEach>
							<a href="javascript:if (${ pageBean.currPage == pageBean.totalPages }) {goPage(${ pageBean.totalPages}) }else { goPage(${ pageBean.currPage + 1 })}"
								id="next">下一页</a>
							<a href='javascript:goPage(${pageBean.totalPages})' id="last">尾页</a>
							<select onchange="goPage(this.value)" id="pselect">
								<c:forEach begin="1" end="${pageBean.totalPages}" var="p">
									<option value="${p}">${p}</option>
								</c:forEach>
							</select>
							<span>当前第${pageBean.currPage}页/共${pageBean.totalPages}页</span>
						</div>

					</div>

					<!-- 弹窗代码开始  -->
					<div class="web_notice" id="msgdiv"
						style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 99999;text-align: left;">
						<div id="msg"
							style="position: fixed;top: 50%;left: 50%;width: 550px;background: #FFF;transform: translate(-50%, -50%);border-radius: 40px;padding: 50px 40px;">
							<form action="admin/orderDetail?opr=update" method="post" id="updateSubmit">
								<h3 style="font-weight: bold;text-align: center;font-size: 30px;margin-top: -20px;">

									<span id="msgs">修改订单信息</span>

								</h3>
								<div style="font-size: 16px;">
									<input type="hidden" id="oid" name="oid" value="1">
									<span>&nbsp;&nbsp;&nbsp;订单号：</span> <input type="text" value="订单号"
										style="margin-top: 20px;padding: 5px;width: 300px;" id="upoid" name="upoid"
										disabled><br>

									<span>&nbsp;&nbsp;&nbsp;&nbsp;收货人：</span><input type="text" name="upshr" value=""
										style="margin-top: 20px;padding: 3px;width: 300px;" id="upshr"><br>
									<span>收货地址：</span><input type="text" name="upshdz" value=""
										style="margin-top: 20px;padding: 3px;width: 300px;" id="upshdz"><br>
									<span>手机号码：</span><input type="text" name="uptel" value=""
										style="margin-top: 20px;padding: 3px;width: 300px;" id="uptel"><br>
									<span>订单金额：</span><input type="text" value="0"
										style="margin-top: 20px;padding: 3px;width: 300px;" id="upddje"
										name="upddje"><br>
									<span>订单状态：</span>
									<input type="radio" name="state" id="updfk" style="margin-top: 20px;" value="1">
									<label for="updfk">待付款</label>
									<input type="radio" name="state" id="upyfk" value="2"> <label
										for="upyfk">已付款</label>
									<input type="radio" name="state" id="upyfh" value="3"> <label
										for="upyfh">已发货</label>
									<input type="radio" name="state" id="upysh" value="4"> <label
										for="upysh">已收货</label><br>
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									&nbsp;&nbsp;
									<input type="radio" name="state" id="upthz" value="5"> <label
										for="upthz">退货中</label>
									<input type="radio" name="state" id="uptyth" value="6"> <label
										for="uptyth">同意退货</label>
									<input type="radio" name="state" id="upbtyth" value="7"> <label
										for="upbtyth">不同意退货</label>
									<input type="radio" name="state" id="upthcg" value="8"> <label
										for="upthcg">退货成功</label>


								</div>

								<div
									style="font-size: 16px;margin-top: 26px;line-height: 30px;color: rgb(149, 67, 67); text-align: center;font-weight: 600;">
									<a href="javascript:void(0)" onclick="updateFromSubmit()"
										style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin-left: 80px;margin-top: 60px;border-radius: 32px;width: 20%;">确定</a>
									<a style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin-left: 340px;margin-top: -60px;border-radius: 32px;width: 20%;cursor: pointer;"
										onclick="nomsgDiv()">取消</a>
								</div>
							</form>
						</div>
					</div>
					<!-- 弹窗代码结束  -->


				</div>
				<div id="separator"></div>
			</div>
		</body>
		<script>
			window.addEventListener("load", function () {
				document.getElementById("admin_right").addEventListener("click", function (e) {

				})
				if (${ order.state == null }){
				document.getElementById("state").value = "0";
			}else {
				document.getElementById("state").value = "${order.state}";
			}
			// 页码下拉框初始化
			document.getElementById("pselect").value = "${pageBean.currPage}";
			// 页面数据量大小
			document.getElementById("categorys").value = "${pageBean.pageSize}";
	});
			function goPage(p) {
				document.getElementById("p").value = p;
				document.getElementById("searchFrom").submit();
			}
			function goPageSize(psize) {
				// javascript:location.href='admin/goods?opr=select&pSize='+this.value;
				document.getElementById("pSize").value = psize;
				document.getElementById("searchFrom").submit();
			}
		</script>
		<script>
			function select(oid) {
				location.href = "/admin/orderDetail?opr=select&oid=" + oid;
			}
		</script>


		<style>
			#msg,
			#msgdiv {
				display: none;
			}

			/* 弹窗动画 */
			#msg {
				-webkit-animation: fadeleftIn .4s;
				animation: fadeleftIn .4s;
				-webkit-animation-name: popIn;
				animation-name: popIn;
			}

			@-webkit-keyframes popIn {
				0% {
					-webkit-transform: scale3d(0, 0, 0);
					transform: scale3d(0.5, 0.5, 0.5);
					opacity: 0;
				}

				50% {
					-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
					animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
				}

				100% {
					-webkit-transform: scale3d(1, 1, 1);
					transform: scale3d(1, 1, 1);
					-webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					opacity: 1;
				}
			}

			@keyframes popIn {
				0% {
					-webkit-transform: scale3d(0, 0, 0);
					transform: scale3d(0.5, 0.5, 0.5);
					opacity: 0;
				}

				50% {
					-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
					animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
				}

				100% {
					/* -webkit-transform: scale3d(1, 1, 1); */
					/* transform: scale3d(1, 1, 1); */
					-webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					opacity: 1;
				}
			}
		</style>
		<script>
			function show() {
				document.getElementById("msg").style.display = "block";
				document.getElementById("msgdiv").style.display = "block";
			}

			function nomsgDiv() {
				document.getElementById("msg").style.display = "none";
				document.getElementById("msgdiv").style.display = "none";
			}
		</script>
		<script>
			// location.href = "/admin/orderDetail?opr=select&oid=" + oid;
			function ide(oid) {
				$.ajax({
					type: "get",
					url: "/admin/orderDetail",
					data: "opr=selectOrder&oid=" + oid,
					dataType: "json",
					success: function (result) {
						$("#oid").val(result.id);
						$("#upoid").val(result.ordersId);
						$("#upshr").val(result.conSingnee);
						$("#upshdz").val(result.address);
						$("#uptel").val(result.tel);
						$("#upddje").val(result.totalMoney);
						if (result.state == 1) {
							$("#updfk").prop("checked", true);
						} else if (result.state == 2) {
							$("#upyfk").prop("checked", true);
						} else if (result.state == 3) {
							$("#upyfh").prop("checked", true);
						} else if (result.state == 4) {
							$("#upysh").prop("checked", true);
						} else if (result.state == 5) {
							$("#upthz").prop("checked", true);
						} else if (result.state == 6) {
							$("#uptyth").prop("checked", true);
						} else if (result.state == 7) {
							$("#upbtyth").prop("checked", true);
						} else if (result.state == 8) {
							$("#upthcg").prop("checked", true);
						}
						// 显示弹窗
						show();
					},
					error: function () {
						layer.msg('系统繁忙，请稍后再试', { icon: 2 });
					}


				})

			}
		</script>

		<script>
			function updateFromSubmit() {

				let datas = {
					id: $("#oid").val(),
					upshr: $("#upshr").val(),
					upshdz: $("#upshdz").val(),
					uptel: $("#uptel").val(),
					upddje: $("#upddje").val(),
					state: $('input:radio:checked').val(),
				}

				$.ajax({
					type: "post",
					url: "admin/orderDetail?opr=update",
					data: datas,
					dataType: "json",
					success: function (result) {
						if (result.msg == 'ok') {
							layer.msg('修改成功', { icon: 1 });
							nomsgDiv();
							window.location.reload();
						} else {
							layer.msg('修改失败', { icon: 2 });
						}
					},
					error: function () {
						{
							layer.msg('系统维护中，请稍后再试', { icon: 2 });
						}
					}

				})
			}
		</script>
		<script>
			function del(oid) {
				layer.confirm("确认删除吗？", function () {
					$.ajax({
						type: "post",
						url: "/admin/order",
						data: "opr=del&oid=" + oid,
						dataType: "json",
						beforeSend: function (r) {
							//加载层-默认风格
							layer.load();
						},
						success: function (result) {
							if (result.msg == 'ok') {
								layer.alert("删除成功", function (index) {
									window.location.reload();
								});
							} else {
								layer.msg(result.msg, { icon: 2 });
							}
						},
						complete: function (XMLHttpRequest, textStatus) {
							// alert('远程调用成功，状态文本值：'+textStatus);
							layer.closeAll('loading');
						},
						error: function () {
							layer.msg('系统繁忙，请稍后再试', { icon: 2 });
						}
					})
				})

			}
		</script>

		</html>